<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册事件（绑定事件）的两种方式</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        // 注册事件有两种方式：传统方式和方法监听注册方式
        // 1、传统方式
        // 利用on开头的事件 onclick
        // <button onclick= "alert('hi~')"></button>
        // btn.onclick = function(){}
        // *特点：注册事件的唯一性
        // 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

        var btns = document.querySelectorAll('button');
        console.log(btns);
        btns[0].onclick = function() {
            alert('Hello World');
        }
        btns[0].onclick = function() {
            alert('Hello javascript');
        }

        // 2.方法监听注册方式
        // eventTarget.addEventListener(type,listener,useCapture);
        // type:事件类型字符串，比如click,mouseover,注意这里不要带on
        // listener：事件处理函数，事件发生时，会调用该监听函数
        // useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

        // w3c 标准推荐方式
        // 兼容性：ie9 以上才支持
        // addEventListener() 它是一个方法
        // IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
        // 特点：同一个元素同一个事件可以注册多个监听器
        // 按注册顺序依次执行
        // addEventListener() 里面的事件类型是字符串 需要加引号，而且不带on的
        btns[1].addEventListener('click', function() {
            alert('Hello JavaScript');
        })
        btns[1].addEventListener('click', function() {
            alert('Hello Python');
        })
        btns[1].addEventListener('click', function() {
            alert('Hello Java');
        })
    </script>
</body>

</html>